<template>
  <div class="page-container" :style="`background-color:${user.themeColor};`">
    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <img
          src="@/assets/player/previous.png"
          alt="无法加载图片"
          :class="`cursor ${
          loginType === 'pc' ? 'pc-mr-6 pc-icon' : 'mobile-mr-6 mobile-icon'
        }`"
      />

      <img
          v-if="playingFlag"
          src="@/assets/player/playing.png"
          alt="无法加载图片"
          :class="`cursor ${
          loginType === 'pc' ? 'pc-mr-6 pc-icon' : 'mobile-mr-6 mobile-icon'
        }`"
          @click="toPlay()"
      />
      <img
          v-else
          src="@/assets/player/play.png"
          alt="无法加载图片"
          :class="`cursor ${
          loginType === 'pc' ? 'pc-mr-6 pc-icon' : 'mobile-mr-6 mobile-icon'
        }`"
          @click="toPlay()"
      />

      <img
          src="@/assets/player/next.png"
          alt="无法加载图片"
          :class="`cursor ${
          loginType === 'pc' ? 'pc-mr-6 pc-icon' : 'mobile-mr-6 mobile-icon'
        }`"
      />

      <div class="pc-mr-6">
        {{ transTime(songStore.currentTime) }}
      </div>
      <div :span="13" class="pc-mr-6 slider-content">
        <a-slider
            v-model:value="songStore.currentTime"
            :tip-formatter="displayTimeFormatter"
            :min="0"
            :max="songStore.durationTime"
            @change="changeCurrentTime"
            :class="`slider-zIndex ${
            loginType === 'pc' ? 'slider-width-pc' : 'slider-width-mobile'
          }`"
            :getTooltipPopupContainer="sliderTooltip"
        />
      </div>
      <div class="pc-mr-6">
        {{ transTime(songStore.durationTime) }}
      </div>
      <!-- <a-badge :count="commentTotal"
                         :number-style="{ backgroundColor: '#108ee9' }">
                    <a-button type="dashed"
                              size="small"
                              style="color:#108ee9"
                              @click="openCommentModal">
                        评论
                    </a-button>
                </a-badge> -->
      <div v-if="loginType === 'pc'" class="volume-vertical-box">
        <a-slider
            v-model:value="currentVolume"
            vertical
            @afterChange="setVolume"
            class="volume-slider"
        />
      </div>
      <img
          v-if="loginType === 'pc'"
          src="@/assets/player/download.png"
          alt="无法加载图片"
          :class="`cursor ${
                loginType === 'pc' ? 'pc-mr-6 pc-icon' : 'mobile-mr-6 mobile-icon'
              }`"
      />
      <a-badge
          v-if="songStore.song.collected"
          :count="songStore.song.up"
          :number-style="{ backgroundColor: '#108ee9' }"
          :class="`cursor ${loginType === 'pc' ? 'pc-mr-6' : 'mobile-mr-6'}`"
      >
        <img
            src="@/assets/image/song/collected.png"
            alt="无法加载图片"
            width="25px"
            height="25px"
            @click="toCollect(songStore.song)"
        />
      </a-badge>
      <a-badge
          v-else
          :count="songStore.song.up"
          :number-style="{ backgroundColor: '#108ee9' }"
          :class="`cursor ${loginType === 'pc' ? 'pc-mr-6' : 'mobile-mr-6'}`"
      >
        <img
            src="../../assets/image/song/bCollect.png"
            alt="无法加载图片"
            width="26px"
            height="26px"
            @click="toCollect(songStore.song)"
        />
      </a-badge>
      <up-outlined
          :class="loginType === 'pc' ? 'open-modal-icon-pc' : 'open-modal-icon'"
          @click="openPlayerModal"
      />
    </div>
    <audio
        v-show="false"
        id="audioId"
        ref="audioRef"
        controls
        autoplay
        :src="getSongUrl(songStore.song.url)"
    ></audio>
    <fullPlayerModal
        :song="songStore.song"
        :songKeys="songKeys"
        :playingFlag="playingFlag"
        :currentMusicLyric="currentMusicLyric"
        :currentTime="songStore.currentTime"
        ref="fullPlayerModalRef"
    ></fullPlayerModal>
  </div>
</template>

<script setup lang="ts">
import {onMounted} from "vue";
import useStore from "@/pinia/index.ts";
import {storeToRefs} from 'pinia';

const {user, songStore} = useStore();
const {songKeys, currentMusicLyric} = storeToRefs(songStore)
import usePlayer from "./config/player.ts";
import {collectSong} from "@/api/api.ts";
import type {songType} from "@/types/pageTypes/songs.ts";
import {message} from "ant-design-vue";
import fullPlayerModal from "./modal/fullPlayerModal.vue";
// import songs from "@/pinia/modules/songs.ts";

const fullPlayerModalRef = ref<InstanceType<typeof fullPlayerModal> | null>(
    null
);
const {
  playingFlag,
  currentVolume,
  audioRef,
  loginType,
  getSongUrl,
  toPlay,
  transTime,
  setVolume,
  getVolume,
  getSongDetail,
  changeCurrentTime,
  displayTimeFormatter,
} = usePlayer();
const openPlayerModal = (): void => {
  if (fullPlayerModalRef.value?.openFullPlayerModal) {
    fullPlayerModalRef.value.openFullPlayerModal(true);
  }
};
const toCollect = (song: songType): void => {
  if (user.userInfo?.id) {
    collectSong(user.userInfo.id, song.id)
        .then((res) => {
          if (res.code === 200) {
            if (song.collected) {
              if (song.up) song.up = song.up - 1;
              message.success("取消收藏成功");
            } else {
              if (song.up) song.up = song.up + 1;
              message.success("收藏成功");
            }

            song.collected = !song.collected;
          } else {
            message.error("收藏失败");
          }
        })
        .catch(() => {
          message.error("系统繁忙请稍后再试");
        });
  } else {
    message.warning("请先登录");
  }
};
const sliderTooltip = (): HTMLElement => {
  return document.querySelector(".slider-content") as HTMLElement;
};
onMounted(() => {
  getSongDetail(36);
  getVolume();
});
</script>

<style scoped lang="less">
.page-container {
  height: 70px;
  text-align: center;
  line-height: 70px;

  .bottom-btn {
    padding: 0 2vw;
    display: flex;
    align-items: center;
    position: relative;

    .cursor {
      cursor: pointer;
    }

    .slider-content {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .volume-vertical-box {
      margin-right: 2vw;

      .volume-slider {
        height: 40px;
      }

      :where(.css-dev-only-do-not-override-ag4l5v).ant-slider-vertical {
        margin: 0;
      }
    }

    // pc
    .pc-mr-6 {
      margin-right: 6px;
    }

    .pc-icon {
      height: 20px;
      width: 20px;
    }

    .slider-width-pc {
      width: 60vw;
    }

    .slider-zIndex {
      z-index: 9999;
    }

    // mobile
    .mobile-mr-6 {
      margin-right: 2vw;
    }

    .mobile-icon {
      height: 4vw;
      width: 4vw;
    }

    .slider-width-mobile {
      width: 35vw;
    }

    .open-modal-icon {
      //position:  absolute;

      height: 8vw;
      width: 8vw;
    }

    .open-modal-icon-pc {
      height: 24px;
      width: 24px;
    }
  }
}
</style>
